<template>
  <el-dialog
    :title="title"
    :visible="visible"
    :width="width"
    @close="close"
  >
    <template v-for="(item, key) of formConfig">
      <el-input
        v-if="!item.hidden"
        v-model="item.value"
        :key="key"
        :placeholder="item.placeholder"
      ></el-input>
    </template>
    <span slot="footer" class="dialog-footer">
				<el-button
          style="color: #03D3BD;border: #03D3BD solid 0.0625rem;"
          @click="close"
        >取 消</el-button>
				<el-button
          type="primary"
          style="background-color: #03D3BD;color: white;border: none;"
          @click="handleConfirm"
        >确定</el-button>
			</span>
  </el-dialog>

</template>

<script>
export default {
  name: 'ChapterUpdateAndAddDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '30%'
    },
    title: {
      type: String,
      default: ''
    },
    formConfig: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    handleConfirm() {
      const data = {}
      Object.keys(this.formConfig).map(key => {
        data[key] = this.formConfig[key].value
      })
      this.$emit('handleConfirm', data)
    }
  }
}
</script>

<style scoped lang="scss">
.el-input:nth-child(n+1) {
  margin-bottom: 8px;
}
</style>
